import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

/**
 * 关于页面
 * 显示系统信息、版本信息和项目说明
 */
Rectangle {
    id: root
    color: "transparent"

    ColumnLayout {
        anchors.fill: parent
        spacing: 20

        // 页面标题
        Text {
            text: "关于系统"
            font.pixelSize: 24
            font.bold: true
            color: "#2c3e50"
        }

        // 内容滚动区域
        ScrollView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            clip: true
            contentWidth: availableWidth

            Flickable {
                contentWidth: width
                contentHeight: contentColumn.height

                Column {
                    id: contentColumn
                    width: parent.width
                    spacing: 20

                    // 系统信息卡片
                    Rectangle {
                        width: parent.width
                        height: logoSection.height + 60
                        color: "white"
                        radius: 8

                        Column {
                            id: logoSection
                            anchors.centerIn: parent
                            width: parent.width - 60
                            spacing: 30

                            // Logo 和标题
                            Column {
                                anchors.horizontalCenter: parent.horizontalCenter
                                spacing: 15

                                Text {
                                    text: "⚡"
                                    font.pixelSize: 80
                                    color: "#3498db"
                                    anchors.horizontalCenter: parent.horizontalCenter
                                }

                                Text {
                                    text: "智慧配电云监控系统"
                                    font.pixelSize: 28
                                    font.bold: true
                                    color: "#2c3e50"
                                    anchors.horizontalCenter: parent.horizontalCenter
                                }

                                Text {
                                    text: "QModbus PowerCloud"
                                    font.pixelSize: 16
                                    color: "#7f8c8d"
                                    anchors.horizontalCenter: parent.horizontalCenter
                                }

                                Rectangle {
                                    width: 400
                                    height: 1
                                    color: "#bdc3c7"
                                    anchors.horizontalCenter: parent.horizontalCenter
                                }
                            }

                            // 版本信息
                            Grid {
                                anchors.horizontalCenter: parent.horizontalCenter
                                columns: 2
                                rowSpacing: 15
                                columnSpacing: 30

                                Text { text: "版本号:"; font.pixelSize: 14; color: "#7f8c8d"; font.bold: true }
                                Text { text: "v1.0.0"; font.pixelSize: 14; color: "#2c3e50" }
                                Text { text: "构建日期:"; font.pixelSize: 14; color: "#7f8c8d"; font.bold: true }
                                Text { text: Qt.formatDate(new Date(), "yyyy-MM-dd"); font.pixelSize: 14; color: "#2c3e50" }
                                Text { text: "Qt 版本:"; font.pixelSize: 14; color: "#7f8c8d"; font.bold: true }
                                Text { text: "Qt 5.15.2"; font.pixelSize: 14; color: "#2c3e50" }
                                Text { text: "编译器:"; font.pixelSize: 14; color: "#7f8c8d"; font.bold: true }
                                Text { text: "MinGW 64-bit"; font.pixelSize: 14; color: "#2c3e50" }
                            }
                        }
                    }

                    // 项目简介卡片
                    Rectangle {
                        width: parent.width
                        height: projectInfo.height + 60
                        color: "white"
                        radius: 8

                        Column {
                            id: projectInfo
                            anchors {
                                left: parent.left
                                right: parent.right
                                top: parent.top
                                margins: 30
                            }
                            spacing: 20

                            Text {
                                text: "项目简介"
                                font.pixelSize: 18
                                font.bold: true
                                color: "#2c3e50"
                            }

                            Rectangle {
                                width: parent.width
                                height: 1
                                color: "#ecf0f1"
                            }

                            Text {
                                width: parent.width
                                text: "智慧配电云是一个基于 Qt/QML 开发的多回路电力仪表监控系统，专为工业配电室设计。\n\n" +
                                      "系统采用 Modbus RTU 协议通过 RS485 总线与施耐德 PM2220 电力仪表通信，实现对配电室的实时监控、数据采集、历史查询和智能报警等功能。"
                                font.pixelSize: 14
                                color: "#34495e"
                                wrapMode: Text.WordWrap
                                lineHeight: 1.5
                            }
                        }
                    }

                    // 系统规模卡片
                    Rectangle {
                        width: parent.width
                        height: systemScale.height + 60
                        color: "white"
                        radius: 8

                        Column {
                            id: systemScale
                            anchors {
                                left: parent.left
                                right: parent.right
                                top: parent.top
                                margins: 30
                            }
                            spacing: 20

                            Text {
                                text: "系统规模"
                                font.pixelSize: 18
                                font.bold: true
                                color: "#2c3e50"
                            }

                            Rectangle {
                                width: parent.width
                                height: 1
                                color: "#ecf0f1"
                            }

                            Row {
                                width: parent.width
                                spacing: 30

                                // 配电室数量
                                Rectangle {
                                    width: (parent.width - 60) / 3
                                    height: 120
                                    color: "#ecf8ff"
                                    radius: 6
                                    border.color: "#3498db"
                                    border.width: 1

                                    Column {
                                        anchors.centerIn: parent
                                        spacing: 10

                                        Text {
                                            text: "⚡"
                                            font.pixelSize: 36
                                            color: "#3498db"
                                            anchors.horizontalCenter: parent.horizontalCenter
                                        }

                                        Text {
                                            text: "3 个"
                                            font.pixelSize: 24
                                            font.bold: true
                                            color: "#2c3e50"
                                            anchors.horizontalCenter: parent.horizontalCenter
                                        }

                                        Text {
                                            text: "配电室"
                                            font.pixelSize: 12
                                            color: "#7f8c8d"
                                            anchors.horizontalCenter: parent.horizontalCenter
                                        }
                                    }
                                }

                                // 电表数量
                                Rectangle {
                                    width: (parent.width - 60) / 3
                                    height: 120
                                    color: "#f0fdf4"
                                    radius: 6
                                    border.color: "#27ae60"
                                    border.width: 1

                                    Column {
                                        anchors.centerIn: parent
                                        spacing: 10

                                        Text {
                                            text: "📊"
                                            font.pixelSize: 36
                                            color: "#27ae60"
                                            anchors.horizontalCenter: parent.horizontalCenter
                                        }

                                        Text {
                                            text: "120 块"
                                            font.pixelSize: 24
                                            font.bold: true
                                            color: "#2c3e50"
                                            anchors.horizontalCenter: parent.horizontalCenter
                                        }

                                        Text {
                                            text: "PM2220 电表"
                                            font.pixelSize: 12
                                            color: "#7f8c8d"
                                            anchors.horizontalCenter: parent.horizontalCenter
                                        }
                                    }
                                }

                                // RS485 总线
                                Rectangle {
                                    width: (parent.width - 60) / 3
                                    height: 120
                                    color: "#fefce8"
                                    radius: 6
                                    border.color: "#f39c12"
                                    border.width: 1

                                    Column {
                                        anchors.centerIn: parent
                                        spacing: 10

                                        Text {
                                            text: "🔌"
                                            font.pixelSize: 36
                                            color: "#f39c12"
                                            anchors.horizontalCenter: parent.horizontalCenter
                                        }

                                        Text {
                                            text: "3 条"
                                            font.pixelSize: 24
                                            font.bold: true
                                            color: "#2c3e50"
                                            anchors.horizontalCenter: parent.horizontalCenter
                                        }

                                        Text {
                                            text: "RS485 总线"
                                            font.pixelSize: 12
                                            color: "#7f8c8d"
                                            anchors.horizontalCenter: parent.horizontalCenter
                                        }
                                    }
                                }
                            }
                        }
                    }

                    // 核心功能卡片
                    Rectangle {
                        width: parent.width
                        height: coreFeatures.height + 60
                        color: "white"
                        radius: 8

                        Column {
                            id: coreFeatures
                            anchors {
                                left: parent.left
                                right: parent.right
                                top: parent.top
                                margins: 30
                            }
                            spacing: 20

                            Text {
                                text: "核心功能"
                                font.pixelSize: 18
                                font.bold: true
                                color: "#2c3e50"
                            }

                            Rectangle {
                                width: parent.width
                                height: 1
                                color: "#ecf0f1"
                            }

                            Grid {
                                width: parent.width
                                columns: 2
                                rowSpacing: 15
                                columnSpacing: 20

                                Repeater {
                                    model: [
                                        { icon: "📊", title: "实时监控", desc: "实时采集电压、电流等参数，延迟 < 1s" },
                                        { icon: "📈", title: "历史查询", desc: "1 年历史数据查询，响应时间 < 3s" },
                                        { icon: "⚠️", title: "智能报警", desc: "过压、欠压、过流等多种报警类型" },
                                        { icon: "💾", title: "断点续传", desc: "通信中断后自动补全缺失数据" },
                                        { icon: "🔄", title: "自动拓扑", desc: "自动识别设备站号和总线拓扑" },
                                        { icon: "☁️", title: "云端推送", desc: "通过巴法云实现远程监控" }
                                    ]

                                    Rectangle {
                                        width: (coreFeatures.width - 20) / 2
                                        height: 80
                                        color: "#f8f9fa"
                                        radius: 6

                                        Row {
                                            anchors.fill: parent
                                            anchors.margins: 15
                                            spacing: 15

                                            Text {
                                                text: modelData.icon
                                                font.pixelSize: 32
                                                anchors.verticalCenter: parent.verticalCenter
                                            }

                                            Column {
                                                width: parent.width - 60
                                                spacing: 5
                                                anchors.verticalCenter: parent.verticalCenter

                                                Text {
                                                    text: modelData.title
                                                    font.pixelSize: 14
                                                    font.bold: true
                                                    color: "#2c3e50"
                                                }

                                                Text {
                                                    width: parent.width
                                                    text: modelData.desc
                                                    font.pixelSize: 12
                                                    color: "#7f8c8d"
                                                    wrapMode: Text.WordWrap
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    // 技术架构卡片
                    Rectangle {
                        width: parent.width
                        height: techArch.height + 60
                        color: "white"
                        radius: 8

                        Column {
                            id: techArch
                            anchors {
                                left: parent.left
                                right: parent.right
                                top: parent.top
                                margins: 30
                            }
                            spacing: 20

                            Text {
                                text: "技术架构"
                                font.pixelSize: 18
                                font.bold: true
                                color: "#2c3e50"
                            }

                            Rectangle {
                                width: parent.width
                                height: 1
                                color: "#ecf0f1"
                            }

                            Column {
                                width: parent.width
                                spacing: 10

                                Repeater {
                                    model: [
                                        { layer: "UI 层", tech: "Qt Quick 2 仪表盘、实时曲线、报警弹窗" },
                                        { layer: "业务层", tech: "DeviceManager / MeterModel / AlarmEngine" },
                                        { layer: "链路层", tech: "ModbusRtuMaster (QSerialBus) + 总线调度线程" },
                                        { layer: "持久层", tech: "SQLite + QtSql + 缓存队列（掉电续传）" }
                                    ]

                                    Rectangle {
                                        width: parent.width
                                        height: 60
                                        color: "#f8f9fa"
                                        radius: 6

                                        Row {
                                            anchors.fill: parent
                                            anchors.margins: 15
                                            spacing: 20

                                            Rectangle {
                                                width: 100
                                                height: 30
                                                color: "#3498db"
                                                radius: 4
                                                anchors.verticalCenter: parent.verticalCenter

                                                Text {
                                                    anchors.centerIn: parent
                                                    text: modelData.layer
                                                    font.pixelSize: 12
                                                    font.bold: true
                                                    color: "white"
                                                }
                                            }

                                            Text {
                                                width: parent.width - 140
                                                text: modelData.tech
                                                font.pixelSize: 13
                                                color: "#34495e"
                                                anchors.verticalCenter: parent.verticalCenter
                                                wrapMode: Text.WordWrap
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }

                    // 通信协议卡片
                    Rectangle {
                        width: parent.width
                        height: protocolInfo.height + 60
                        color: "white"
                        radius: 8

                        Column {
                            id: protocolInfo
                            anchors {
                                left: parent.left
                                right: parent.right
                                top: parent.top
                                margins: 30
                            }
                            spacing: 20

                            Text {
                                text: "通信协议"
                                font.pixelSize: 18
                                font.bold: true
                                color: "#2c3e50"
                            }

                            Rectangle {
                                width: parent.width
                                height: 1
                                color: "#ecf0f1"
                            }

                            Grid {
                                columns: 2
                                rowSpacing: 15
                                columnSpacing: 40

                                Text { text: "协议类型:"; font.pixelSize: 13; color: "#7f8c8d"; font.bold: true }
                                Text { text: "Modbus RTU"; font.pixelSize: 13; color: "#2c3e50" }
                                Text { text: "波特率:"; font.pixelSize: 13; color: "#7f8c8d"; font.bold: true }
                                Text { text: "115200 bps"; font.pixelSize: 13; color: "#2c3e50" }
                                Text { text: "数据位:"; font.pixelSize: 13; color: "#7f8c8d"; font.bold: true }
                                Text { text: "8N1 (8 数据位, 无校验, 1 停止位)"; font.pixelSize: 13; color: "#2c3e50" }
                                Text { text: "站号范围:"; font.pixelSize: 13; color: "#7f8c8d"; font.bold: true }
                                Text { text: "1 - 120"; font.pixelSize: 13; color: "#2c3e50" }
                                Text { text: "轮询周期:"; font.pixelSize: 13; color: "#7f8c8d"; font.bold: true }
                                Text { text: "500 ms (每批 30 块表)"; font.pixelSize: 13; color: "#2c3e50" }
                                Text { text: "功能码:"; font.pixelSize: 13; color: "#7f8c8d"; font.bold: true }
                                Text { text: "0x03 (读保持寄存器)"; font.pixelSize: 13; color: "#2c3e50" }
                            }
                        }
                    }

                    // 版权信息卡片
                    Rectangle {
                        width: parent.width
                        height: copyright.height + 60
                        color: "white"
                        radius: 8

                        Column {
                            id: copyright
                            anchors {
                                left: parent.left
                                right: parent.right
                                top: parent.top
                                margins: 30
                            }
                            spacing: 15

                            Text {
                                text: "版权信息"
                                font.pixelSize: 18
                                font.bold: true
                                color: "#2c3e50"
                            }

                            Rectangle {
                                width: parent.width
                                height: 1
                                color: "#ecf0f1"
                            }

                            Text {
                                width: parent.width
                                text: "© 2025 智慧配电云项目团队. All rights reserved."
                                font.pixelSize: 13
                                color: "#7f8c8d"
                                horizontalAlignment: Text.AlignHCenter
                            }

                            Text {
                                width: parent.width
                                text: "本软件遵循 MIT 开源协议"
                                font.pixelSize: 12
                                color: "#95a5a6"
                                horizontalAlignment: Text.AlignHCenter
                            }
                        }
                    }

                    // 底部留白
                    Item {
                        width: parent.width
                        height: 20
                    }
                }
            }
        }
    }
}
